import React, {Component} from 'react';
import Form from "antd/es/form";
import TextArea from "antd/lib/input/TextArea";
import {Avatar, Button, Comment} from "antd";
import CommentStore from "../../stores/CommentStore";
import UserStore from "../../stores/UserStore";
import {inject, observer} from "mobx-react";
import {SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import {CheckUserLogin} from "../../utils/Utils";

const Editor = ({onChange, onSubmit, value}) => (
    <>
        <Form.Item>
            <TextArea rows={4} onChange={onChange} value={value}/>
        </Form.Item>
        <Form.Item>
            <Button htmlType="submit" onClick={onSubmit} type="primary">
                评论
            </Button>
        </Form.Item>
    </>
);

interface IComment {
    commentStore?: CommentStore;
    userStore?: UserStore;
}

@inject("commentStore", "userStore")
@observer
class CommentReply extends Component <IComment, any> {
    onchange = (e) => {
        this.props.commentStore.SetReply(e.target.value);
    }

    render() {
        const user = this.props.userStore.userInfo;
        const comment = this.props.commentStore;
        return (
            <Comment
                avatar={
                    <Avatar
                        src={`${SERVER_PICTURE_URL}/${user?.avatarUrl}`}
                        alt=""
                    />
                }
                content={
                    <Editor
                        onChange={this.onchange.bind(this)}
                        onSubmit={() => {
                            if (CheckUserLogin()) {
                                comment.addComment(comment.reply, comment.replyId, user.id);
                            } else {
                                this.props.commentStore.SetReply("");
                            }
                        }}
                        value={comment.reply}
                    />
                }/>
        );
    }
}

export default CommentReply;